/* region
	
endregion */
/*---------------------------------------------------------------------------------------*/
/*=======================================================================================*/
/*region Bootstrap 常用类名 -------------------------------------------------------------
	1. 准备工作
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	2. 在HTML页面中引入Bootstrap对应的CSS文件
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	3. 创建一个根标签 类名一定是 container 或 container-fluid
	<div class="container">...</div>

	栅格布局几个常用类名
	.row
		.col-xs-number       --- 超小屏幕 手机 (<768px)
		.col-sm-number       --- 小屏幕 平板 (≥768px)                                
		.col-md-number	    --- 中等屏幕 桌面显示器 (≥992px)
   	.col-lg-number       --- 大屏幕 大桌面显示器 (≥1200px) 
	.col-md-offset-number  从左向右偏移
	
endregion ===============================================================================*/
/*region 一些html语义化标签名

endregion*/
/*--css初始化----------------------------------*/
* {
  box-sizing: border-box;
}
body,
ul,
h1,
h2,
h3,
h4,
h5,
h6,
input,
p,
dl,
dt,
dd {
  margin: 0;
  padding: 0;
}
body {
  font: 12px arial, "microsoft yahei";
  background-color: #fff;
  color: #9a9a9a;
}
li {
  list-style: none;
}
img {
  border: 0 none;
  vertical-align: top;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 12px;
  font-weight: normal;
}
input,
textarea {
  border: 0 none;
  outline-style: none;
}
a {
  text-decoration: none;
  color: #333;
}
i,
em {
  font-style: normal;
}
/* -========================================= */
/*下面是添加类名=-----------------------*/
/*默认选中颜色*/
.checked {
  color: red;
}
/*版心*/
.w {
  width: 1200px;
  margin: 0 auto;
}
/* ======================================== */
/* 一 .栅格布局 --------------------------*/
.grid {
  display: grid;
}
.grid-1-5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.grid-2-5 {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-r-gap-10 {
  grid-row-gap: 10px;
}
.grid-c-gap-10 {
  grid-column-gap: 10px;
}
/* ======================================= */
/* 二 .弹性盒布局类名 ----------------------*/
.flex {
  display: flex;
}
.flex-between {
  display: flex;
  justify-content: space-between;
}
.flex-around {
  display: flex;
  justify-content: space-around;
}
.flex-evenly {
  display: flex;
  justify-content: space-evenly;
}
/* flex-换行 */
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
/* 单行居中 */
.flex-ai-c {
  align-items: center;
}
/* 多行居中 */
.flex-ac-c {
  align-content: center;
}
/* 占n份 */
.flex1 {
  flex: 1;
}
/* =========================================== */
/* 三 .浮动类布局---------------------------------------*/
.fl {
  float: left;
}
.fr {
  float: right;
}
/*.clearfix:before, .clearfix:after {
 	content: "";
 	display: table;
 }
 .clearfix:after {
 	clear: both;
 }
*/
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.clearfix {
  *zoom: 1;
}
/* ======================================== */
/* 四 . 定位布局------------------------ */
.posr {
  position: relative;
}
.posa {
  position: absolute;
}
.posf {
  position: fixed;
}
/* ------------------------------ */
/*文本单行三个点-----------------------------*/
.text-sd {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 弹性盒子多行的三点点 */
.flex-sd {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
/* textarea 禁止文本域伸缩 */
.resize-none {
  resize: none;
}
/* ============================================ */
/* 背景相关的 记单词----------------------------------*/
.bgc-l-g {
  background: linear-gradient(to right, #fa5956, #fa9b4d);
}
.bgc-r-g {
  background: radial-gradient(100px at top left, red, green);
}
.bg-s {
  /* 背景size 100% 100% ,cover*/
  background-size: contain;
}
.bg-fixed {
  /*背景固定 scroll 默认值  above left right*/
  background-attachment: fixed;
}
.box-reflect {
  /* 倒影 */
  -webkit-box-reflect: below 1px -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
}
.perspective {
  perspective: 1000px;
}
.transform-3d {
  transform-style: preserve-3d;
}
.transform2d {
  transform: translate(600px) rotate(360deg) scale(0.5, 0.5);
}
.transform3d {
  transform: translateZ(600px) rotateZ(360deg) scaleY(0.5, 0.5);
}
.transition {
  transition: all 1s linear 2s;
}
.animation {
  animation: tinkaikin  2s infinite  alternate linear 1s;
}
@keyframes tinkaikin {
}
/*快捷字体-------------------------------*/
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.f18 {
  font-size: 18px;
}
.f20 {
  font-size: 20px;
}
.f22 {
  font-size: 22px;
}
.f24 {
  font-size: 24px;
}
.fw700 {
  font-weight: 700;
}
/* 伪标签 其他的一些东西 */
/* 标签伪类设置一条竖线  <li class="line"><li>*/
.line::after {
  content: "|";
  width: 1px;
  height: 12px;
  color: #ccc;
}
/* 三角形 */
.triangle::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: red;
}
/* 怕忘记单词的 */
/* 1. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> 最大+最小*/
.max980-min320 {
  width: 100%;
  max-width: 980px;
  min-width: 320px;
  margin: 0 auto;
}
/*region  引入图片字体 基本都在字体里面去设置

// unicode引入图片字体注意路径------------------------------------------- 
@font-face {
  font-family: 'iconfont';
  src: url('../fonts/iconfont.eot');
  src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/iconfont.woff') format('woff'),
  url('../fonts/iconfont.ttf') format('truetype'),
  url('../fonts/iconfont.svg#iconfont') format('svg');
}

.iconfont{
  font-family:"iconfont" !important;
  font-size:@iconfont-size;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: bottom;
}
//调用 例子
//<i class="iconfont">&#x33;</i>
endregion */
